<template>
  <div>
    <!-- 登录成功后会返回用户角色名 将其进行展示 -->
    <el-card shadow="always">
      <el-row :gutter="25">
        <el-col :span="3">
          <el-avatar :size="100" :src="userAvatar" />
        </el-col>
        <el-col :span="20">
          <h2 class="title">{{ getTime() }}好{{ userName }}</h2>
          <p class="content">硅谷甄选运营平台{{ role }}</p>
        </el-col>
      </el-row>
    </el-card>
    <!-- svg图片 -->
    <div class="svg">
      <SvgIcon name="welcome" width="100%" height="330px" />
    </div>
  </div>
</template>

<script setup lang="ts" name="Home">
import useUserStore from '@/store/modules/user'
import { getTime } from '@/utils/time'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

// 引用用户相关的仓库获取用户信息
const userStore = useUserStore()
// 获取当前用户的用户名，角色名，头像
const { userRole, userName, userAvatar } = storeToRefs(userStore)
// 获取当前用户的全部角色
let role = ref('')
userRole.value.forEach((item: string) => {
  role.value += `、${item}`
})
</script>

<style scoped>
.title {
  margin-top: 25px;
  font-weight: bold;
  font-size: 25px;
  color: rgb(3, 135, 137);
}
.content {
  margin-top: 15px;
  font-style: italic;
  font-size: 16px;
  color: skyblue;
}
.svg {
  display: flex;
  margin-top: 40px;
  justify-content: center;
}
</style>
